<template>
  <div class="app-container">
    <div class="divBar" />
    <h5 class="titleInfo">创建商户</h5>
    <el-form ref="form" class="form" :rules="rules" :model="form" label-width="180px">
      <!-- <el-form-item label="商户名称" prop="businesstype">
                  <el-input v-model="form.identity" placeholder="请输入15、18位字母或数字" />
      </el-form-item>-->

      <el-form-item label="签约分公司" prop="branch_office">
        <!-- <el-input v-model="form.branch_office" /> -->
        <el-select v-model="form.branch_office" placeholder="请选择">
          <el-option
            v-for="item in optionstwo"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="签约身份" prop="role_id">
        <el-radio-group v-model="form.role_id">
          <el-radio :label="2">特约授权经销商</el-radio>
          <el-radio :label="3">高级授权经销商</el-radio>
          <el-radio :label="7">普通合伙人授权经销商</el-radio>
          <el-radio :label="8">高级合伙人授权经销商</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="联系人" prop="realname">
        <el-input v-model="form.realname" />
      </el-form-item>

      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>

      <el-form-item label="营业执照" prop="enp_img">
        <newUpload ref="uploadImg" :fileNum="3" :fileList="fileList" :sizeNumber="2" />
        <p class="msgText">请上传大小不超过2M，最多可上传3张，格式JPG、JPEG、PNG</p>
      </el-form-item>

      <el-form-item label="商户地区" prop="daily_address">
        <el-cascader v-model="form.daily_address" :options="options" @change="pcaList" />
      </el-form-item>
      <el-form-item label="推荐人手机号" prop="referee">
        <el-input v-model="form.referee" @blur="checkPoson" />
      </el-form-item>

      <el-form-item label="推荐人姓名" prop="recomend_user">
        <el-input v-model="form.recomend_user" disabled />
      </el-form-item>

      <el-form-item>
        <el-button style="margin:30px 0" type="primary" @click="submitNext('form')">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import newUpload from "@/components/UploadImg/indexShop";
import {
  getPro,
  createShop,
  getBranchOffice,
  checkPoson
} from "@/api/shopMange";

export default {
  components: { newUpload },

  data() {
    // 电话号验证
    var validateNum = (rule, value, callback) => {
      const phoneNumber = /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
      if (!value) {
        callback(new Error("请输入电话号码"));
      } else if (!phoneNumber.test(value)) {
        callback(new Error("请输入正确电话号码"));
      } else {
        callback();
      }
    };
    var validateNum1 = (rule, value, callback) => {
      const phoneNumber = /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
      if (!value) {
        callback(new Error("请输入电话号码"));
      } else if (!phoneNumber.test(value)) {
        callback(new Error("请输入正确电话号码"));
      } else if (!this.enpMsg) {
        callback(new Error("推荐人手机号不存在"));
      } else {
        callback();
      }
    };
    return {
      optionstwo: [],
      form: {
        branch_office: "",
        role_id: "",
        realname: "",
        phone: "",
        referee: "",
        recomend_user: "",
        enp_img: "",
        daily_address: [],
        province_id: "",
        city_id: ""
      },
      fileList: [],
      options: [],
      enpMsg: false,
      rules: {
        // businesstype: [{ required: true,validator: validateBusType}],
        phone: [{ required: true, validator: validateNum, trigger: "blur" }],
        realname: [
          { required: true, message: "请输入联系人", trigger: "blur" }
        ],
        role_id: [
          { required: true, message: "请选择签约身份", trigger: "change" }
        ],
        branch_office: [
          { required: true, message: "请选择签约分公司", trigger: "change" }
        ],
        enp_img: [{ required: true, message: "请上传营业执照照片" }],
        daily_address: [
          { required: true, message: "请选择常驻地址", trigger: "change" }
        ],
        referee: [{ required: true, validator: validateNum1, trigger: "blur" }]
        // bank_pic: [
        //   { required: true, message: "请上传授权照片" }
        // ],
      }
    };
  },
  created() {
    this.cateShop();
    this.getArea();
  },
  methods: {
    submitNext(e) {
      this.form.enp_img = this.$refs.uploadImg
        .submitUpload()
        .map(item => item.url);
      this.$refs.form.clearValidate("enp_img");
      // console.log(this.form.enp_img);
      //  return;
      this.$refs[e].validate(valid => {
        if (valid) {
          const data = {
            branch_office: this.form.branch_office,
            role_id: this.form.role_id,
            realname: this.form.realname,
            phone: this.form.phone,
            referee: this.form.referee,
            // recomend_user:this.form.recomend_user,
            enp_img: this.form.enp_img,
            province_id: this.form.daily_address[0],
            city_id: this.form.daily_address[1]
          };
          createShop(data).then(res => {
            if (res.data.code == 200) {
              this.$router.push("shopCheckList");
              this.$message({
                message: "创建成功",
                type: "success"
              });
            } else {
              this.$message({
                message: res.data.msg,
                type: "warning"
              });
            }
          });
        } else {
          this.$message({
            message: "有必填项没填，不能提交咯",
            type: "warning"
          });
          return false;
        }
      });
    },
    getArea() {
      getPro().then(res => {
        const newArr = [];
        res.data.forEach((item1, index) => {
          newArr.push({
            value: item1.value,
            label: item1.label
          });
          if (item1.children != null) {
            newArr[index]["children"] = [];
            item1.children.forEach(item2 => {
              newArr[index]["children"].push({
                value: item2.value,
                label: item2.label
              });
            });
          }
        });
        this.options = newArr;
      });
    },
    pcaList(value) {
      let e = this.options;
      this.form.provinceId = e[0];
      this.form.cityId = e[1];
      // this.form.area = e[2]
    },
    cateShop() {
      getBranchOffice().then(res => {
        if (res.data.code == 200) {
          const newArr = [];
          res.data.data.forEach((item1, index) => {
            newArr.push({
              value: item1.id,
              label: item1.name
            });
          });
          this.optionstwo = newArr;
        }
      });
    },
    //验证推荐人
    checkPoson() {
      this.$refs.form.validateField("referee");
      this.enpMsg = false;
      if (this.form.referee && this.form.referee.length == 11) {
        checkPoson({ referee: this.form.referee }).then(res => {
          if (res.data.code == 200) {
            this.enpMsg = true;
            this.$refs.form.validateField("referee");
            this.form.recomend_user = res.data.data.name;
          } else {
            this.form.recomend_user = "";
          }
        });
      } else {
        this.form.recomend_user = "";
      }
    }
  }
};
</script>
<style  scoped>
.app-container {
  padding: 0px !important;
}
.msgText {
  width: 370px;
  /* height: 30px; */
  color: #444;
  font-weight: 400;
  /* line-height: 30px; */
}
</style>